<template>
  <div class="operate-bar" ref="operateBarRef">
    <span
      class="operate-icon"
      :class="{ 'is-hide': !visible }"
      @click="visible = !visible"
    ></span>
    <ul class="tools" v-if="visible">
      <li
        @click="change('select')"
        :class="{ active: activeItem === 'select' }"
      >
        <label class="select icon"></label>
        <span>选择</span>
      </li>
      <li
        class="pen-item"
        @click="change('pen')"
        :class="{ active: activeItem === 'pen' }"
      >
        <label class="pen icon"></label>
        <span>画笔</span>
      </li>
      <li
        class="clean-item"
        @click="change('clean')"
        :class="{ active: activeItem === 'clean' }"
      >
        <label class="clean icon"></label>
        <span>板擦</span>
      </li>
      <li @click="revert('delete')">
        <label class="delete icon"></label>
        <span>删除</span>
      </li>
      <li @click="revert('cancel')">
        <label class="cancel icon"></label>
        <span>撤销</span>
      </li>
      <li @click="revert('recover')">
        <label class="recover icon"></label>
        <span>恢复</span>
      </li>
    </ul>
    <Modal
      ref="modalRef"
      class="drawing-board-modal"
      :class="{ 'is-clean': activeItem === 'clean' }"
      v-if="sizeSettingModal"
      @cancel="sizeSettingModal = false"
      @closeModal="sizeSettingModal = false"
    >
      <template #modalContent>
        <div class="pen-list" v-if="activeItem === 'pen'">
          <ul class="size">
            <li
              :class="{ active: penSize === PenSizeEnum.small }"
              @click="changePenSize(PenSizeEnum.small)"
            >
              <label class="small"></label>
            </li>
            <li
              :class="{ active: penSize === PenSizeEnum.middle }"
              @click="changePenSize(PenSizeEnum.middle)"
            >
              <label class="middle"></label>
            </li>
            <li
              :class="{ active: penSize === PenSizeEnum.big }"
              @click="changePenSize(PenSizeEnum.big)"
            >
              <label class="big"></label>
            </li>
          </ul>
          <ul class="color">
            <li
              class="color__item"
              v-for="(item, index) in colorList"
              :class="{ white: colorList[index] === '#fff' }"
              :key="index"
              :style="{ backgroundColor: item }"
              @click="changePenColor(index)"
            >
              <template v-if="colorList[index] === '#fff'">
                <img
                  v-if="index === penColor"
                  class="checkedImg"
                  src="@/assets/images/comment/white-checked.png"
                />
              </template>
              <template v-else>
                <img
                  v-if="index === penColor"
                  class="checkedImg"
                  src="@/assets/images/comment/color-checked.png"
                />
              </template>
            </li>
          </ul>
        </div>
        <div class="eraser-list" v-if="activeItem === 'clean'">
          <ul class="size">
            <li
              :class="{ active: cleanSize === CleanSizeMap.small.desc }"
              @click="changeCleanSize(CleanSizeMap.small.desc)"
            >
              <label class="small"></label>
            </li>
            <li
              :class="{ active: cleanSize === CleanSizeMap.middle.desc }"
              @click="changeCleanSize(CleanSizeMap.middle.desc)"
            >
              <label class="middle"></label>
            </li>
            <li
              :class="{ active: cleanSize === CleanSizeMap.big.desc }"
              @click="changeCleanSize(CleanSizeMap.big.desc)"
            >
              <label class="big"></label>
            </li>
          </ul>
        </div>
      </template>
    </Modal>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick, onMounted } from 'vue'
import { useComment, CleanSizeMap } from '@/stores/comment'
import Modal from '@/views/comment/components/Modal.vue'
const homeworkAssessment = useComment()
const PenSizeEnum = {
  small: 3,
  middle: 6,
  big: 9
}
const visible = ref(true)
const activeItem = ref('select')
const emits = defineEmits(['draw', 'revert', 'changeCleanSize'])
const tools = ['select', 'pen', 'clean']
const sizeSettingModal = ref(false)
const operateBarRef = ref(null)
const penSize = ref(PenSizeEnum.small)
const cleanSize = ref(CleanSizeMap.small.desc)
const penColor = ref(0)
const modalRef = ref()
const colorList = [
  '#F31D1D',
  '#EA3A83',
  '#F38702',
  '#D7AA28',
  '#6010B5',
  '#437EF4',
  '#01BF96',
  '#4B9530',
  '#2E2F2F',
  '#7B7C7C',
  '#B8BABA',
  '#fff'
]
const change = type => {
  if (tools.includes(type)) {
    // 第二次点击当前元素
    if (type === activeItem.value) {
      if (type === 'pen' || type === 'clean') {
        sizeSettingModal.value = !sizeSettingModal.value
      }
    } else {
      sizeSettingModal.value = false
    }
    activeItem.value = type
  }
  emits('draw', type)
}

const revert = type => {
  emits('revert', type)
  emits('draw', activeItem.value)
}

const changePenSize = size => {
  penSize.value = size
  homeworkAssessment.setDrawingBoard({ penSize: size })
}

const changePenColor = index => {
  penColor.value = index
  homeworkAssessment.setDrawingBoard({ penColor: colorList[index] })
}

const changeCleanSize = size => {
  cleanSize.value = size
  homeworkAssessment.setDrawingBoard({ cleanSize: size })
  emits('changeCleanSize', cleanSize.value)
}

const ListenerFn = event => {
  if (
    modalRef.value &&
    !event.target.closest('.drawing-board-modal') &&
    !event.target.closest('.pen-item') &&
    !event.target.closest('.clean-item')
  ) {
    sizeSettingModal.value = false
  }
}

watch(
  () => sizeSettingModal.value,
  val => {
    if (val) {
      nextTick(() => {
        document.addEventListener('click', ListenerFn)
      })
    } else {
      document.removeEventListener('click', ListenerFn)
    }
  }
)

onMounted(() => {
  penColor.value = colorList.findIndex(
    item => item === homeworkAssessment.drawingBoard.penColor
  )
  penSize.value = homeworkAssessment.drawingBoard.penSize
  cleanSize.value = homeworkAssessment.drawingBoard.cleanSize
})
</script>
<style lang="less" scoped>
.operate-bar {
  z-index: 999;
  display: flex;
  left: calc(50% - 236px);
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 0;
  height: 108px;
  width: 472px;

  :deep(.mask) {
    background: transparent;
    position: absolute;
    z-index: -1;
    .modal {
      position: absolute;
      background: #f3f4f4;
      bottom: 95px;
      padding: 12px 16px;
      border-radius: 8px;
      left: -56px;

      .modal-top,
      .modal-btn {
        display: none;
      }
    }

    &.is-clean {
      .modal {
        left: 0 !important;
      }
    }
  }

  .operate-icon {
    display: inline-block;
    height: 20px;
    width: 109px;
    background: url('@/assets/images/comment/operate-icon.png') no-repeat
      center/cover;

    &:hover {
      background: url('@/assets/images/comment/operate-icon-hover.png')
        no-repeat center/cover;
    }

    &.is-hide {
      background: url('@/assets/images/comment/operate-icon-press.png')
        no-repeat center/cover;
    }
  }
  .tools {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 88px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    margin: 0;

    li {
      cursor: pointer;
      padding: 3px 15px;
      border-radius: 12px;
      list-style-type: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &.active,
      &:hover {
        * {
          color: #fff;
        }

        .select {
          background: url('@/assets/images/comment/canvas-select-hover.png')
            no-repeat center/cover;
        }

        .pen {
          background: url('@/assets/images/comment/canvas-pen-hover.png')
            no-repeat center/cover;
        }

        .clean {
          background: url('@/assets/images/comment/canvas-clean-hover.png')
            no-repeat center/cover;
        }

        .delete {
          background: url('@/assets/images/comment/canvas-delete-hover.png')
            no-repeat center/cover;
        }

        .recover {
          background: url('@/assets/images/comment/canvas-recover-hover.png')
            no-repeat center/cover;
        }

        .cancel {
          background: url('@/assets/images/comment/canvas-cancel-hover.png')
            no-repeat center/cover;
        }
      }

      &:hover {
        background: rgba(0, 189, 141, 1);
      }

      &.active {
        background: rgba(0, 189, 141, 1);
      }

      .icon {
        display: inline-block;
        width: 34px;
        height: 34px;
      }

      .select {
        background: url('@/assets/images/comment/canvas-select.png') no-repeat
          center/cover;
      }

      .pen {
        background: url('@/assets/images/comment/canvas-pen.png') no-repeat
          center/cover;
      }

      .clean {
        background: url('@/assets/images/comment/canvas-clean.png') no-repeat
          center/cover;
      }

      .delete {
        background: url('@/assets/images/comment/canvas-delete.png') no-repeat
          center/cover;
      }

      .recover {
        background: url('@/assets/images/comment/canvas-recover.png') no-repeat
          center/cover;
      }

      .cancel {
        background: url('@/assets/images/comment/canvas-cancel.png') no-repeat
          center/cover;
      }
    }
  }

  li {
    list-style-type: none;
  }

  .pen-list,
  .eraser-list {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .color {
      width: 100%;
      height: fit-content;
      display: grid;
      grid-template-columns: repeat(4, 40px);
      column-gap: 16px;
      row-gap: 8px;
      &__item {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;

        &.white {
          box-shadow: 0px 3px 6px 0px rgba(184, 186, 186, 0.4);
        }

        .checkedImg {
          width: 24px;
          height: 24px;
        }

        &:hover {
          opacity: 0.84;
        }
      }
    }

    .size {
      height: fit-content;
      width: 100%;
      display: flex;
      gap: 16px;
      li {
        height: 40px;
        width: 40px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.active,
        &:hover {
          background: #00bd8d;
        }
      }

      label {
        display: inline-block;
        background: #d9d9d9;

        &.small {
          border-radius: 40px;
          height: 12px;
          width: 12px;
        }

        &.middle {
          border-radius: 40px;
          height: 20px;
          width: 20px;
        }

        &.big {
          border-radius: 40px;
          height: 26px;
          width: 26px;
        }
      }
    }
  }
}
</style>
